<template>
  <div class="container">
    <div class="card">
      <h1>✏️ 单词拼写游戏</h1>
      
      <div v-if="!gameStarted" class="game-intro">
        <p>根据中文提示拼写正确的英文单词</p>
        <div class="game-controls">
          <button class="btn" @click="startGame">开始游戏</button>
        </div>
      </div>
      
      <div v-else-if="gameEnded" class="game-result">
        <h2>游戏结束！</h2>
        <div class="score-display">
          <div class="score">得分: {{ score }}/{{ totalWords }}</div>
          <div class="accuracy">正确率: {{ accuracy }}%</div>
          <div class="time">用时: {{ formatTime(timeElapsed) }}</div>
        </div>
        <div class="mistakes" v-if="mistakes.length > 0">
          <h3>错误单词:</h3>
          <div v-for="mistake in mistakes" :key="mistake.word" class="mistake-item">
            <span class="word">{{ mistake.word }}</span>
            <span class="meaning">{{ mistake.meaning }}</span>
            <span class="your-answer">你的答案: {{ mistake.yourAnswer }}</span>
          </div>
        </div>
        <div class="game-controls">
          <button class="btn" @click="restartGame">再玩一次</button>
          <button class="btn" @click="goHome">返回首页</button>
        </div>
      </div>
      
      <div v-else class="game-area">
        <div class="game-info">
          <div class="score">得分: {{ score }}/{{ totalWords }}</div>
          <div class="timer">时间: {{ formatTime(timeElapsed) }}</div>
          <div class="current-word">第 {{ currentIndex + 1 }} 题</div>
        </div>
        
        <div class="spelling-area">
          <div class="meaning-display">
            <h3>中文含义:</h3>
            <div class="meaning-text">{{ currentWord.meaning }}</div>
          </div>
          
          <div class="input-area">
            <input 
              v-model="userAnswer" 
              @keyup.enter="checkAnswer"
              @input="clearFeedback"
              type="text" 
              class="input-field"
              placeholder="请输入英文单词..."
              :class="{ 'correct': isCorrect, 'incorrect': isIncorrect }"
              :disabled="answered"
            />
            <div class="feedback" v-if="feedback">
              {{ feedback }}
            </div>
          </div>
          
          <div class="hint-area" v-if="showHint">
            <div class="hint-text">
              提示: {{ currentWord.word.length }} 个字母
            </div>
            <div class="hint-letters">
              {{ getHintLetters() }}
            </div>
          </div>
        </div>
        
        <div class="game-controls">
          <button class="btn" @click="checkAnswer" :disabled="!userAnswer.trim()">提交答案</button>
          <button class="btn" @click="showHint = !showHint">{{ showHint ? '隐藏提示' : '显示提示' }}</button>
          <button class="btn" @click="restartGame">重新开始</button>
          <button class="btn" @click="goHome">返回首页</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRandomWords } from '../data/words.js'

export default {
  name: 'WordSpelling',
  data() {
    return {
      gameStarted: false,
      gameEnded: false,
      words: [],
      currentIndex: 0,
      userAnswer: '',
      score: 0,
      totalWords: 0,
      timeElapsed: 0,
      timer: null,
      answered: false,
      isCorrect: false,
      isIncorrect: false,
      feedback: '',
      showHint: false,
      mistakes: []
    }
  },
  computed: {
    currentWord() {
      return this.words[this.currentIndex] || {}
    },
    accuracy() {
      return this.totalWords > 0 ? Math.round((this.score / this.totalWords) * 100) : 0
    }
  },
  methods: {
    startGame() {
      this.gameStarted = true
      this.gameEnded = false
      this.words = getRandomWords(10)
      this.currentIndex = 0
      this.score = 0
      this.totalWords = this.words.length
      this.timeElapsed = 0
      this.mistakes = []
      
      this.timer = setInterval(() => {
        this.timeElapsed++
      }, 1000)
    },
    
    checkAnswer() {
      if (!this.userAnswer.trim() || this.answered) return
      
      const userAnswer = this.userAnswer.trim().toLowerCase()
      const correctAnswer = this.currentWord.word.toLowerCase()
      
      this.answered = true
      
      if (userAnswer === correctAnswer) {
        this.isCorrect = true
        this.feedback = '✅ 正确！'
        this.score++
      } else {
        this.isIncorrect = true
        this.feedback = `❌ 错误！正确答案是: ${this.currentWord.word}`
        this.mistakes.push({
          word: this.currentWord.word,
          meaning: this.currentWord.meaning,
          yourAnswer: this.userAnswer
        })
      }
      
      setTimeout(() => {
        this.nextWord()
      }, 2000)
    },
    
    nextWord() {
      this.currentIndex++
      this.userAnswer = ''
      this.answered = false
      this.isCorrect = false
      this.isIncorrect = false
      this.feedback = ''
      this.showHint = false
      
      if (this.currentIndex >= this.totalWords) {
        this.endGame()
      }
    },
    
    clearFeedback() {
      if (!this.answered) {
        this.isCorrect = false
        this.isIncorrect = false
        this.feedback = ''
      }
    },
    
    getHintLetters() {
      const word = this.currentWord.word
      const letters = word.split('')
      return letters.map((letter, index) => {
        if (index === 0 || index === letters.length - 1) {
          return letter
        } else {
          return '_'
        }
      }).join(' ')
    },
    
    endGame() {
      clearInterval(this.timer)
      this.gameEnded = true
    },
    
    restartGame() {
      this.gameStarted = false
      this.gameEnded = false
    },
    
    goHome() {
      this.$router.push('/')
    },
    
    formatTime(seconds) {
      const mins = Math.floor(seconds / 60)
      const secs = seconds % 60
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
    }
  },
  
  beforeUnmount() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped>
h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 20px;
}

.game-intro p {
  text-align: center;
  color: #7f8c8d;
  font-size: 1.2em;
  margin-bottom: 30px;
}

.game-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  flex-wrap: wrap;
  gap: 10px;
}

.game-info > div {
  background: linear-gradient(45deg, #74b9ff, #0984e3);
  color: white;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;
}

.spelling-area {
  text-align: center;
  margin-bottom: 30px;
}

.meaning-display {
  margin-bottom: 30px;
}

.meaning-display h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 1.3em;
}

.meaning-text {
  background: linear-gradient(135deg, #fdcb6e, #e17055);
  color: white;
  padding: 20px;
  border-radius: 15px;
  font-size: 1.5em;
  font-weight: bold;
  display: inline-block;
  min-width: 200px;
}

.input-area {
  margin-bottom: 30px;
}

.input-field {
  font-size: 1.3em;
  text-align: center;
  letter-spacing: 2px;
}

.feedback {
  margin-top: 15px;
  font-size: 1.2em;
  font-weight: bold;
  min-height: 30px;
}

.hint-area {
  background: rgba(116, 185, 255, 0.1);
  padding: 20px;
  border-radius: 15px;
  border: 2px dashed #74b9ff;
}

.hint-text {
  color: #2c3e50;
  font-weight: bold;
  margin-bottom: 10px;
}

.hint-letters {
  font-family: 'Courier New', monospace;
  font-size: 1.5em;
  font-weight: bold;
  color: #74b9ff;
  letter-spacing: 5px;
}

.game-controls {
  text-align: center;
  margin-top: 20px;
}

.game-controls .btn {
  margin: 0 10px;
  margin-bottom: 10px;
}

.game-result {
  text-align: center;
}

.game-result h2 {
  color: #2c3e50;
  margin-bottom: 30px;
  font-size: 2em;
}

.score-display {
  margin-bottom: 30px;
}

.score-display > div {
  margin: 10px 0;
  font-size: 1.2em;
  font-weight: bold;
}

.mistakes {
  margin: 30px 0;
  text-align: left;
}

.mistakes h3 {
  color: #e17055;
  margin-bottom: 15px;
}

.mistake-item {
  background: #f8f9fa;
  padding: 15px;
  margin: 10px 0;
  border-radius: 10px;
  border-left: 4px solid #e17055;
}

.mistake-item .word {
  font-weight: bold;
  color: #2c3e50;
  margin-right: 15px;
}

.mistake-item .meaning {
  color: #7f8c8d;
  margin-right: 15px;
}

.mistake-item .your-answer {
  color: #e17055;
  font-style: italic;
}

@media (max-width: 768px) {
  .game-info {
    flex-direction: column;
    align-items: center;
  }
  
  .game-controls .btn {
    display: block;
    width: 100%;
    margin: 5px 0;
  }
  
  .meaning-text {
    font-size: 1.2em;
    padding: 15px;
  }
  
  .input-field {
    font-size: 1.1em;
  }
}
</style> 